<template>
    <view class="like-wraper">
        <view class="animation" 
			:class="animation ? 'start' : '' " 
			@tap="like"></view>
    </view>
</template>

<script>
    export default{
        props: {},
        data() {
            return {
				animation: false,
				aniUrl: ''
			}
        },
        methods: {
            like() {
                if (!this.animation) {
                    this.aniUrl = '/static/images/gift-ani.gif'
                    this.animation = true
                    const timmer = setTimeout(() => {
                        clearTimeout(timmer)
                        this.aniUrl = ''
                        this.animation = false
                    }, 760)
                    this.$emit('like')
                } else {}
            }
        },
        computed: {}
    }
</script>
<style type="scss">
    /* .like {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: 0;
        left: 0;
    } */
    .ani-like {
        width: 130rpx;
        height: 280rpx;
        position: absolute;
        bottom: -21rpx;
        left: -33rpx;
    }
    .like-wraper {
        width: 64rpx;
        height: 64rpx;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }
    .gka-wrap {
        width: 130rpx;
        height: 280rpx;
    }
    .animation {
        width: 130rpx;
        height: 280rpx;
        background-image: url("../../static/images/live/like.png");
        background-size: 130rpx 280rpx;
        background-repeat: no-repeat;
        animation-duration: 0.76s;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-timing-function: steps(1);
        position: absolute;
        bottom: -21rpx;
        left: -33rpx;

    }
    .animation.start{
        animation-name: keyframes-like;
    }
    @keyframes keyframes-like {
        0% {
            width: 130rpx;
            height: 280rpx;
            background-image: url("../../static/images/live/like-1.png");
            background-size: 130rpx 280rpx;
        }
        5.26% {
            background-image: url("../../static/images/live/like-2.png");
        }
        10.53% {
            background-image: url("../../static/images/live/like-3.png");
        }
        15.79% {
            background-image: url("../../static/images/live/like-4.png");
        }
        21.05% {
            background-image: url("../../static/images/live/like-5.png");
        }
        26.32% {
            background-image: url("../../static/images/live/like-6.png");
        }
        31.58% {
            background-image: url("../../static/images/live/like-7.png");
        }
        36.84% {
            background-image: url("../../static/images/live/like-8.png");
        }
        42.11% {
            background-image: url("../../static/images/live/like-9.png");
        }
        47.37% {
            background-image: url("../../static/images/live/like-10.png");
        }
        52.63% {
            background-image: url("../../static/images/live/like-11.png");
        }
        57.89% {
            background-image: url("../../static/images/live/like-12.png");
        }
        63.16% {
            background-image: url("../../static/images/live/like-13.png");
        }
        68.42% {
            background-image: url("../../static/images/live/like-14.png");
        }
        73.68% {
            background-image: url("../../static/images/live/like-15.png");
        }
        78.95% {
            background-image: url("../../static/images/live/like-16.png");
        }
        84.21% {
            background-image: url("../../static/images/live/like-17.png");
        }
        89.47% {
            background-image: url("../../static/images/live/like-18.png");
        }
        94.74%,
        100% {
            background-image: url("../../static/images/live/like-19.png");
        }
    }
</style>